<template>
	<view class="warp">
		<!-- 自定义导航栏 -->
		<view class="bg">
		<uni-nav-bar background-color="rgba(0,0,0,0)"
		 color="#0b2659" :border="false" :fixed="true"
		  @clickLeft="left"  left-icon="left" 
		   leftWidth="50rpx" rightWidth="10rpx" 
		   :statusBar="true"  
		   >
		   <view class="title_box">
		 	 <view class="left">
				<view class="left_text">
					签到
				</view>
			</view>
		 	<view class="right" @click="torecord">
				<uni-icons fontFamily="CustomFont" :size="26">{{'\ue62b'}}</uni-icons>
		 	</view>
		   </view>
		</uni-nav-bar>
		
		<view class="cont_box">
			
		<view class="cb_bg">
			 
			<view class="cb_left">
				<view class="top">
					<uni-icons color="#dbb2f6" fontFamily="CustomFont" :size="26">{{'\ue61b'}}</uni-icons>
				     <span style="padding: 0 10rpx;">0</span>
					 <uni-icons color="#cecece" type="right" size="18"></uni-icons>

				</view>
				<view class="bottom">
					<uni-icons color="#fccf3e" type="star-filled" size="26"></uni-icons>
					 <span style="padding: 0 10rpx;">{{starnumber}}</span>
					 <uni-icons color="#cecece" type="right" size="18"></uni-icons>

				</view>
			</view>	
			<view class="cb_right">
				<view class="cb_r_tex">
					<sapn style="font-size: 70rpx;margin-right: 10rpx;font-weight: 550;font-style: italic;">{{signnums}}</sapn>
					<span style="font-size: 26rpx;">天</span>
				</view>
			</view>
		</view>
		<view class="cb_qian">
			<view class="list">
				<view :class="signnums>index?'active':'item'" v-for="(item,index) in 7" :key="index">
					<view class="icon">
						<uni-icons color="#fccf3e" type="star-filled" size="26"></uni-icons>
					</view>
					<view class="tetx">
						+1
					</view>
				</view>
			</view>
		</view>
		<view class="cb_bottom">
			
			<view class="cont_text">
				<view class="icon">
					<uni-icons color="#6ac2fc" fontFamily="CustomFont" :size="32">{{'\ue60f'}}</uni-icons>
				</view>
				<view class="center_text">
					<view class="top">
						免费获取小星星(0/5)
					</view>
					<view class="bottom">
						<span>每次获取</span>
						<span><uni-icons color="#fccf3e" type="star-filled" size="12"></uni-icons></span>
						<span>+3</span>
					</view>
				</view>
				
			</view>
			<view class="right">
				<view class="button">
					获取
				</view>
			</view>
		</view>
		</view>
		</view>
		<view class="getmopre">
			<view class="titel">
				赚更多
			</view>
			<view class="get_more_box">
				<view class="task">
					<view class="icon">
						<uni-icons color="#6ac2fc" fontFamily="CustomFont" :size="32">{{'\ufbb9'}}</uni-icons>
					</view>
					<view class="cont_text">
						完成任务
					</view>
				</view>
				<view class="elf">
					<view class="icon">
						<uni-icons color="#e3a1ef" fontFamily="CustomFont" :size="32">{{'\ue74d'}}</uni-icons>
					</view>
					<view class="cont_text">
						<span>喂养精灵</span>
					</view>
				</view>
			</view>
		</view>
		<view class="game_box">
			<view class="titel">
				放肆花
			</view>
			<view class="list">
				<view class="list_item">
					<view class="left">
						<view class="icon">
							<uni-icons color="#ff6f5c" fontFamily="CustomFont" :size="32">{{'\ue615'}}</uni-icons>
						</view>
						<view class="text">
							小星星转盘抽奖
						</view>
					</view>
					<view class="right">
						参与
					</view>
				</view>
				<view class="list_item">
					<view class="left">
						<view class="icon">
							<uni-icons color="#ff6f5c" fontFamily="CustomFont" :size="30">{{'\ue610'}}</uni-icons>
						</view>
						<view class="text">
							兑换大人提问卷
						</view>
					</view>
					<view class="right">
						参与
					</view>
				</view>
				<view class="list_item">
					<view class="left">
						<view class="icon">
							<uni-icons color="#73ddf9" fontFamily="CustomFont" :size="30">{{'\ue63c'}}</uni-icons>
						</view>
						<view class="text">
							兑换AI智能解答次数
						</view>
					</view>
					<view class="right">
						参与
					</view>
				</view>
				<view class="list_item">
					<view class="left">
						<view class="icon">
							<uni-icons color="#d0a8f6" fontFamily="CustomFont" :size="30">{{'\ue60d'}}</uni-icons>
						</view>
						<view class="text">
							小星星夺宝大作战
						</view>
					</view>
					<view class="right">
						参与
					</view>
				</view>
				<view class="list_item">
					<view class="left">
						<view class="icon">
							<uni-icons color="#f2b978" fontFamily="CustomFont" :size="32">{{'\ue63d'}}</uni-icons>
						</view>
						<view class="text">
							更多兑换尽在小星星商城
						</view>
					</view>
					<view class="right">
						参与
					</view>
				</view>
			</view>
		
		</view>
		 <view class="" style="margin-bottom:30%;height: 300rpx;">
		 	
		 </view>
		 <!-- 登录提示框 -->
		 <loginPop ref="loginPop"  ></loginPop>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				 
				signnums:0,//连续签到次数
				starnumber:0
			};
		},
		onLoad() {
			this.getsignnumber()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		methods:{
			// 获取签到次数
			getsignnumber(){
				if(!this.hasLogin){
					this.$refs.loginPop.openLogin()
				}else{
					this.$request({
						url:'v3/sign/front/detail',
						method:'GET'
					}).then(res=>{
						if(res.state==200){
							this.signnums=res.data.consecutiveDays
							this.starnumber=res.data.integral
						}
					})
				}
				
			},
			// 跳转签到记录
			torecord(){
				uni.navigateTo({
					url:"/pages/moreModule/signrecord/signrecord"
				})
			},
			
			left(){
				uni.navigateBack({delta:1})
			},
		}
	}
</script>

<style lang="scss">
	
.warp{
	.title_box{
		padding: 0 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			display: flex;
			align-items: center;
			.left_text{
				font-size: 30rpx !important;
				margin-right: 10rpx;
				
			}
			.left_icon{
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border: 2rpx solid #323333;
				border-radius: 50%;
				
			}
			
		}
	}
	.bg{
		background: url(../../../static/images/qiandao.png) ;
		background-size: cover;
		height: 750rpx;
	}
	.cont_box{
		padding: 0 30rpx;
		.cb_bg{
			margin-top: 110rpx;
			display: flex;
			justify-content: space-between;
			position: relative;
			// overflow: hidden;
			.cb_left{
				font-size: 32rpx;
				font-weight: 550;
				.top,.bottom{
					height: 80rpx;
					 padding: 10rpx 20rpx;
					 background-color: #e2efff;
					 border-radius: 40rpx;
					 display: flex;
					 align-items: center;
				}
				.bottom{
					margin-top: 30rpx;
				}
			}
			.cb_right{
				position: absolute;
				// position: relative;
				left: 70rpx;
				bottom: -270rpx;
				width: 600rpx;
				height: 600rpx;
				background: url(../../../static/images/qiandaoday.png) ;
				background-size: cover;
				.cb_r_tex{
					position: absolute;
					left: 320rpx;
					bottom:310rpx;
				} 
			}
		}
		.cb_qian{
			margin-top: 80rpx;
			  
			.list{
				display: flex;
				justify-content: space-between;
				.item{
					padding: 16rpx 12rpx;
					background-color: #fff;
					border-radius: 10rpx;
					text-align: center;
					color: #cecece;
				}
				.active{
					padding: 16rpx 12rpx;
					background-color:#b4d5fe;
					color: #50a4d0;
					border-radius: 10rpx;
					text-align: center;
				}
			}
		}
		.cb_bottom{
			margin-top: 40rpx;
			background-color: #fff;
			padding: 30rpx 20rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.cont_text{
				display: flex;
				align-items: center;
				.center_text{
					margin-left: 20rpx;
					letter-spacing: 4rpx;
					.top{
						font-size: 26rpx;
						font-weight: 550;
						color: #565858;
					}
					.bottom{
						font-size: 24rpx;
						color: #cecece;
					}
				}
				
			}
			.right{
				.button{
					padding: 12rpx 40rpx;
					background-color: #50a4d0;
					color: #fff;
					border-radius: 28rpx;
				}
			}
		}
		
	}
	// 更多
	.getmopre{
		margin-top: 60rpx;
		.titel{
			padding:0 20rpx;
			font-size: 40rpx;
			// font-weight: 550;
		}
		.get_more_box{
			margin-top: 20rpx;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			.task,.elf{
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 16rpx 70rpx;
				border-radius: 10rpx;
				.cont_text{
					margin-left: 20rpx;
				}
			}
		}
		
	}
	// 游戏
	.game_box{
		margin-top: 60rpx;
		padding: 0 20rpx;
		 
		.titel{
			padding:0 20rpx;
			font-size: 40rpx;
			// font-weight: 550;
		}
		.list{
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			.list_item{
				padding: 20rpx 0;
			     display: flex;
				 justify-content: space-between;
				 align-items: center;
				 .left{
					 display: flex;
					 align-items: center;
					 .text{
						font-size: 28rpx;
						 color: #565858;
						 margin-left: 20rpx;
					 }
				 }
				 .right{
					 border-radius: 37rpx;
					 padding: 10rpx 30rpx;
					 border: 2rpx solid #50a4d0;
				      color: #50a4d0;
					  letter-spacing: 2rpx;
				 }
			}
		}
		
	}
}
</style>
